<template>
  <div>
    <el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="800px" @closed="closed">
      <div v-loading="loading">
        <el-descriptions size="small" border :label-style="{ width: '80px' }">
          <el-descriptions-item label="工序名称">{{ info.checkTableName }}</el-descriptions-item>
          <el-descriptions-item label="报验批次">第 {{ info.batchNumber }} 批次</el-descriptions-item>
          <el-descriptions-item label="报验人员">{{ info.inspector }}</el-descriptions-item>
          <el-descriptions-item label="报验日期">{{ info.inspectionTime }}</el-descriptions-item>
          <el-descriptions-item label="完成率" v-if="info.unitType === 6">{{ info.percent + '%' }}</el-descriptions-item>
          <el-descriptions-item label="报验范围" v-if="info.unitType != 3 && info.unitType != 7">
            <el-button size="mini" type="text" :loading="viewLoading" @click="handleViewBtn" v-if="showViewBtn">点击查看</el-button>
            <span v-else-if="info.unitType === 6">{{ directionMap[info.direction] }}</span>
            <span v-else>{{ info.startFloor }}层 - {{ info.endFloor }}层</span>
          </el-descriptions-item>
          <el-descriptions-item label="批次说明" :span="3">{{ info.description }}</el-descriptions-item>
        </el-descriptions>

        <el-table :data="points" size="small" style="margin-top: 15px">
          <el-table-column type="index" />
          <el-table-column prop="content" label="验收要点">
            <span slot-scope="{ row }" :style="{ color: row.key == 1 ? 'red' : '' }">{{ row.content }}</span>
          </el-table-column>
          <el-table-column prop="key" label="强制要求" width="100" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.key == 1" style="color: red">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
        </el-table>

        <el-card style="margin-top: 15px">
          <el-row :gutter="24">
            <el-col :span="12">
              <div class="img-box">
                <div class="label">标准做法：</div>
                <div v-if="info.tableFileUrls">
                  <el-image class="img-thumb" v-for="url in info.tableFileUrls" :key="url" :src="url" fit="cover" :preview-src-list="info.tableFileUrls" />
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="img-box">
                <div class="label">附件：</div>
                <div v-if="info.fileUrls">
                  <el-image class="img-thumb" v-for="url in info.fileUrls" :key="url" :src="url" fit="cover" :preview-src-list="info.fileUrls" />
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </el-dialog>

    <el-dialog title="报验情况" :visible.sync="planState.visible">
      <CheckStateArea :building-id="info.buildingId" :check-table-id="info.checkTableId" :sel-room-ids="planState.selRoomIds" show-type="inspect" :is-edit="false" />
    </el-dialog>

    <el-dialog title="桩基情况" :visible.sync="pileState.visible" width="600px">
      <el-table size="mini" :data="pileState.data">
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="桩基编号" prop="pileName" />
      </el-table>
    </el-dialog>

    <el-dialog title="公区情况" :visible.sync="publicState.visible" width="600px">
      <LineDrawPlane ref="drawPlane" :file-id="publicState.fileId" :line-arr="publicState.lineArr" />
    </el-dialog>
  </div>
</template>
<script>
// 报验详情
import { getFileURL } from '@/api/common'
import { getInspection, getInspectionRoom, getInspectionPile, getInspectionPublic } from '@/api/cqCheck'
import CheckStateArea from '@/views/components/CheckStateArea'
import LineDrawPlane from '@/views/qualityManage/components/LineDrawPlane'
const directionMap = { e: '东面', s: '南面', w: '西面', n: '北面' }
export default {
  name: 'InspectionDetail',
  components: { CheckStateArea, LineDrawPlane },
  data() {
    return {
      directionMap,
      show: false,
      loading: false,
      queryParams: { id: '' },
      title: '',
      info: {},
      points: [],
      viewLoading: false,
      planState: { visible: false, selRoomIds: [] },
      pileState: { visible: false, data: [] },
      publicState: { visible: false, fileId: null, lineArr: [] }
    }
  },
  computed: {
    showViewBtn() {
      const { unitType, spaceType } = this.info
      return (unitType === 2 && spaceType === 1) || unitType === 4 || unitType === 5
    }
  },
  methods: {
    closed() {
      this.loading = false
      this.queryParams = { id: '' }
      this.title = ''
      this.info = {}
      this.points = []
      this.viewLoading = false
      this.planState = { visible: false, selRoomIds: [] }
      this.pileState = { visible: false, data: [] }
      this.publicState = { visible: false, fileId: null, lineArr: [] }
    },
    async open(data = {}) {
      this.show = true
      this.queryParams.id = data.id
      this.getDetail()
    },
    async getDetail() {
      if (this.loading) return
      this.loading = true
      const res = await getInspection(this.queryParams).catch(() => false)
      this.loading = false
      if (res === false) return

      const data = res.data || {}
      this.title = data.title
      this.points = data.points || []

      const info = data.info || {}
      if (info.fileIds?.length) info.fileUrls = info.fileIds.map(fileId => getFileURL(fileId))
      if (info.tableFileIds?.length) info.tableFileUrls = info.tableFileIds.map(fileId => getFileURL(fileId))
      this.info = info
    },
    handleViewBtn() {
      const { unitType, spaceType } = this.info
      if (unitType === 2 && spaceType === 1) return this.showPlan()
      if (unitType === 4) return this.showPile()
      if (unitType === 5) return this.showPublic()
    },
    async showPlan() {
      const state = this.planState
      if (this.viewLoading) return
      this.viewLoading = true
      const res = await getInspectionRoom({ fid: this.info.id }).catch(() => false)
      this.viewLoading = false
      if (res === false) return

      const data = res.data || []
      state.selRoomIds = data.map(i => i.fid)
      state.visible = true
    },
    async showPile() {
      const state = this.pileState
      if (this.viewLoading) return
      this.viewLoading = true
      const res = await getInspectionPile({ fid: this.info.id }).catch(() => false)
      this.viewLoading = false
      if (res === false) return

      state.data = res.data
      state.visible = true
    },
    async showPublic() {
      const state = this.publicState
      if (this.viewLoading) return
      this.viewLoading = true
      const res = await getInspectionPublic({ fid: this.info.id }).catch(() => false)
      this.viewLoading = false
      if (res === false) return

      const data = res.data[0]
      state.fileId = data.fileId
      state.lineArr = [{ status: -1, points: JSON.parse(data.drawArea) }]
      state.visible = true
      this.$nextTick(() => this.$refs.drawPlane.init())
    }
  }
}
</script>
<style lang="scss" scoped>
.img-box {
  display: flex;
  margin-top: 10px;
  .label {
    white-space: nowrap;
    color: #606266;
  }
  .img-thumb {
    width: 100px;
    height: 100px;
    margin: 0 10px 10px 0;
  }
}
</style>
